<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/" method="post">

    <div class="textbox-with-image1">
        <label for="name"></label>
        <input  placeholder="用户名"  type="text" style="width: 280px;height: 20px" id="name" name="name" required>
        <img src="../001-login/images/用户.jpg" alt="Image">
    </div>
    <br>


    <div class="textbox-with-image2">
        <label for="password"></label>
        <input  placeholder="密  码" type="password" style="width: 280px;height: 20px" id="password" name="password" required>
        <img src="../001-login/images/密码.jpg" alt="Image">
    </div>
    <br>


    <div class="textbox-with-image3">
        <label for="code"></label>
        <input  placeholder="验证码"  type="text" style="width: 130px; height: 20px"  id="code" name="name" required>
        <img src="../001-login/images/验证码.jpg" alt="Image">
    </div>


    <div class="textbox-with-image4">
        <img src="../001-login/images/验证码图片.jpg" alt="Image">
    </div>



    <div style="display: flex;justify-content: space-between;width: 200px">
        <div class="textbox-with-image5">
            <input type="checkbox" id="subscribe" name="subscribe" checked>
            <label for="subscribe">记住密码</label>
        </div>
    </div>


    <div  class="textbox-with-image6">
        <a href="demo1.html">忘记密码?</a>
    </div>

    <button class="login_button">
        <span>登录</span>
    </button>

    <div>
        <p>社交帐号登录</p>
    </div>

    <div class="textbox-with-image7">
        <a href="demo1.html" target="_blank">
            <img src="../001-login/images/QQ登录.jpg" alt="Link Icon Description">
        </a>
    </div>

    <div class="textbox-with-image8">
        <a href="demo1.html" target="_blank">
            <img src="../001-login/images/微信登录.jpg" alt="Link Icon Description">
        </a>
    </div>

    <div class="textbox-with-image9">
        <a href="demo1.html" target="_blank">
            <img src="../001-login/images/微博登录.jpg" alt="Link Icon Description">
        </a>
    </div>

    <div class="textbox-with-image10">
        <p>或</p>
    </div>

    <div  class="textbox-with-image11">
        <a href="demo1.html">注册账号</a>
    </div>

</form>
</body>
</html>

<style>

    .textbox-with-image1 {
        position: relative;
        display: inline-block;
    }
    .textbox-with-image1 img {
        position: absolute;
        width: 25px;
        height: 15px;
        top: 30%;
        transform: translateY(-50%);
        left: 1px;
    }
    .textbox-with-image1 input[type="text"] {
        padding-left: 25px;
        margin-bottom: 15px;
    }

    .textbox-with-image2 {
        position: relative;
        display: inline-block;
    }
    .textbox-with-image2 img {
        position: absolute;
        width: 15px;
        height: 15px;
        top: 32%;
        transform: translateY(-50%);
        left: 5px;
    }
    .textbox-with-image2 input[type="password"] {
        padding-left: 25px;
        margin-bottom: 15px;
    }



    .textbox-with-image3 img {
        position: absolute;
        width: 15px;
        height: 16px;
        top: 11%;
        transform: translateY(-50%);
        left: 9px;
    }
    .textbox-with-image3 input[type="text"] {
        padding-left: 25px;
        margin-bottom: 15px;
    }

    .textbox-with-image4{
        position: relative;
        display: inline-block;
    }
    .textbox-with-image4 img {
        position: absolute;
        width: 90px;
        height: 40px;
        top: 5%;
        transform: translateY(-170%);
        left: 200px;
    }

    .textbox-with-image5{
        position: relative;
    }
    .textbox-with-image6 a {
        color: #0d6efd;
        position: absolute;
        text-decoration: none;
        top: 152px;
        left: 240px;
    }


    .login_button{
        background-color: #20c997;
        height: 40px;
        width: 315px;
        text-align: center;
        color: white;
        border: 0;

    }

    .textbox-with-image7 img {
        position: absolute;
        width: 25px;
        height: 25px;
        top: 29%;
        transform: translateY(-170%);
        left: 110px;
    }

    .textbox-with-image8 img {
        position: absolute;
        width: 25px;
        height: 25px;
        top: 29%;
        transform: translateY(-170%);
        left: 140px;
    }

    .textbox-with-image9 img {
        position: absolute;
        width: 31px;
        height: 31px;
        top:279px;
        transform: translateY(-170%);
        left: 168px;
    }

    .textbox-with-image10 {
        position: absolute;
        width: 10px;
        height: 10px;
        top: 218px;
        transform: translateY(-50%);
        left: 215px;
    }

    .textbox-with-image11 a {
        color: #0d6efd;
        position: absolute;
        text-decoration: none;
        top: 230px;
        left: 240px;
    }
</style>